<template>
    <div class="qilin-elementPlus">
        <QilinExplain title="element-Plus中的一些踩坑点" date="2024-06-18">
            <template v-slot:content>
                <div class="warning qilin-mb-1">1、el-table 组件结合插槽和数据格式化（formatter）时，数据格式化formatter是不会生效的；</div>
                <div class="warning qilin-mb-1">2、在封装el-table二次源组件时，v-bind="item" 会影响表格树组件的收缩；</div>
                <div class="warning qilin-mb-1">3、在封装el-table二次源组件多级表头时，在el-table-column下面，不能同时写el-table-column和#default；</div>
            </template>
        </QilinExplain>
        <QilinExplain title="动态设置日期范围不可跨年选择" date="2023-11-24">
            <template v-slot:content>
                <el-date-picker v-model="value1" type="daterange" range-separator="至"
                    start-placeholder="开始" end-placeholder="截止"
                    :disabled-date="setDisabledDate" @calendar-change="initSelectStartTime"
                    @change="changeDate" style="margin-bottom:20px;"
                ></el-date-picker>
                <CodeMirror :codeValue="getCodeValue1"></CodeMirror>
            </template>
        </QilinExplain>
    </div>
</template>

<script setup>

/*
    数据变量定义区域
*/
// 动态设置日期范围不可跨年选择所需变量区域
// 选中的时间
let value1=ref("");
// 当前筛选时间初次选中的年度
let currentSelectYear=ref(null);


/*
    计算属性等代码区域
*/
// 动态设置日期范围不可跨年选择所需逻辑区域
const getCodeValue1=computed(()=>{
    return `
        // html部分
        <el-date-picker v-model="value1" type="daterange" range-separator="至"
            start-placeholder="开始" end-placeholder="截止"
            :disabled-date="setDisabledDate" @calendar-change="initSelectStartTime"
            @change="changeDate" style="margin-bottom:20px;"
        ></el-date-picker>
        // js部分
        // 选中的时间
        let value1=ref("");
        // 当前筛选时间初次选中的年度
        let currentSelectYear=ref(null);

        // 首次选择开始时间事件监听
        const initSelectStartTime=(val)=>{
            currentSelectYear.value=val[0].getFullYear();
        };
        // 设置时间不可跨年选择事件监听
        const setDisabledDate=(date)=>{
            if(currentSelectYear.value){
                return date.getFullYear() !== currentSelectYear.value;
            };
        };
        // 日期改变时事件监听
        const changeDate=()=>{
            currentSelectYear.value=null;
        };
    `
});



/*
    逻辑脚本代码区域
*/
// 动态设置日期范围不可跨年选择所需逻辑区域
// 首次选择开始时间事件监听
const initSelectStartTime=(val)=>{
    currentSelectYear.value=val[0].getFullYear();
};
// 设置时间不可跨年选择事件监听
const setDisabledDate=(date)=>{
    if(currentSelectYear.value){
        return date.getFullYear() !== currentSelectYear.value;
    };
};
// 日期改变时事件监听
const changeDate=()=>{
    currentSelectYear.value=null;
};


/*
    生命周期等代码区域
*/

</script>

<style lang="scss" scoped>
.qilin-elementPlus{
    width: 100%;
    padding: 0 10px 40px;
}
</style>

